<template>
  <div class="common_block_div">
    <div class="">
      <!-- <el-form :model="queryParams" ref="queryForm" class="margin_t20"  label-width="90px">
        <el-row class="flex flex_w">
          <FormItem label="搜索关键词" class="" type="input" :form="queryParams" @keyenter="handleQuery" prop="keywords" clearable />
          <div class="search_btns pad_l20">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </div>
        </el-row>
      </el-form> -->

      <div class="common_button flex_ac">
        <div class="right_button margin_a flex">
          <a href="javascript:;" class="color_blue " @click="handleUpdate()"
            v-if="have_auth('/dictionary/type/add')">新增</a>
          <a href="javascript:;" class="color_red" @click="handleDelete('', 'delete', '删除')"
            v-if="have_auth('/dictionary/type/del')">删除</a>
        </div>
      </div>
    </div>
    <div class="">
      <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="类型" align="left" prop="dict_name" />
        <el-table-column label="排序" align="left" prop="dict_sort" />
        <!-- <el-table-column label="发布时间" align="left" prop="create_time"  />
        <el-table-column label="发布人" align="center" prop="author" width="120" />
        <el-table-column label="状态" align="center" prop="is_hid" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.is_hid==0" size="mini">启用</el-tag>
            <el-tag type="warning"v-if="scope.row.is_hid!=0" size="mini">禁用</el-tag>
          </template>
</el-table-column> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="handleDetail(scope.row)"  v-if="have_auth('/system/notice/read')">详情</el-button> -->
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"
              v-if="have_auth('/dictionary/type/edit')">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row, 'delete', '删除')"
              v-if="have_auth('/dictionary/type/del')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
        @pagination="getList" />
    </div>

    <el-dialog v-dialogDrag :close-on-click-modal="false" title="编辑/新增" :visible.sync="open1" width="400px"
      append-to-body>
      <el-form ref="form1" :model="form1" :rules="rules1" label-width="80px">
        <el-row>
          <FormItem label="标题" :span="24" type="input" :form="form1" prop="dict_name" />
          <FormItem label="排序" :span="24" type="number" :form="form1" prop="dict_sort" />
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open1 = false;">取 消</el-button>
        <el-button type="primary" @click="submitForm('form1')" :loading="is_ajax">{{ is_ajax ? '保存中···' : '确定'
          }}</el-button>
      </div>
    </el-dialog>

    <!-- 上传图片预览 -->
    <el-dialog :close-on-click-modal="false" append-to-body @closed="uploadImageUrl = ''" width="600px"
      :visible.sync="uploadImgVisible">
      <img style="width: 100%;" :src="uploadImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: 'needCache',
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      activeName: '1',  // 1进行中 2 已结束
      loading: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 16
      },
      openOptions: [],
      open: false,
      queryParams2: {},
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false,
      is_ajax: false,
      open1: false,
      form1: {
        type: 1,
        audit_remark: ''
      },
      // 表单校验
      rules1: {
        dict_name: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ]
      },

    }
  },
  activated() {
    this.getList();
  },
  methods: {
    handleUpdate(row) {
      this.open1 = true;
      this.form1 = row ? { ...row } : {
        // dict_type:'db_type',
        dict_type: 'jg_type',
        dict_name: "",
        dict_sort: ''
      }
      if (this.$refs.form1) {
        this.$refs.form1.resetFields();
      }

    },
    /** 提交按钮 */
    submitForm: function (form) {
      const _this = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          this.is_ajax = true;
          let _data = { ..._this[form] };
          let url = "/manage/Dict/save";
          _this.axios.post(url, _data).then(function (data) {
            if (data) {
              _this.tip_show('操作成功', 'success');
              _this.open1 = false;
              _this.getList()
            }
            _this.is_ajax = false;
          }).catch(function (error) {
            _this.is_ajax = false
            console.log(error);
          })
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** 删除按钮操作 */
    handleDelete(row, type, text) {
      const _this = this;
      const ids = row.id ? [row.id] : _this.ids;
      if (ids.length == 0) {
        _this.$message.error('请选择要操作的数据');
        return false;
      }
      let _data = { ids: ids }
      this.$confirm('是否确认' + text + '?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        _this.axios.post("/manage/Dict/batch_delete", _data).then((res) => {
          if (res) {
            _this.getList();
            _this.$message.success('操作成功');
          }
        }).catch((err) => {
          console.log(err);
        });
      })
    },
    /** 查询定时任务列表 */
    getList() {
      const _this = this;
      this.loading = true;
      _this.axios.get("/manage/Dict/index", {
        params: {
          ...this.queryParams,
          dict_type: 'jg_type'
          // dict_type: 'db_type'
        }
      }).then(function (res) {
        if (res) {
          _this.list = res.message.data;
          _this.total = res.message.total;
          _this.loading = false;
          // _this.openOptions=_this.obj2arr(res.message.search.status)
        }
      }).catch(function (error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        page: 1,
        limit: 16
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  line-height: 44px;
  font-size: 20px;
}
</style>
